<template>
  <a-checkbox-group  v-model="stateValue" @change="onChange">
    <a-checkbox v-for="(item, key) in dictOptions" :key="key" :value="item.value">
      <span style="display: inline-block;width: 100%" :title=" item.text || item.label ">
        {{ item.text || item.label }}
      </span>
    </a-checkbox>
  </a-checkbox-group>
</template>

<script>
  import {getAction} from '../../api/manage';

  // checkbox 复选框
  export default {
    name: "AkCheckbox",
    props: {
      url: {
        type:String,
        required: true
      },
      value:{
        type: String,
        required: false
      }
    },
    data() {
      return {
        dictOptions: [],
        stateValue:''
      }
    },
    mounted() {
      //获取字典数据
      this.initDictData();
      this.stateValue = this.value?this.value.split(","):[];
    },
    methods: {
      initDictData() {
        getAction(this.url).then((res) => {
          if (res.success) {
            this.dictOptions = res.result;
          }
        })
      },
      onChange(value) {
        this.$emit('change',value.join(","));
        this.stateValue=value;
      },
    },
    model: {
      prop: 'value',
      event: 'change'
    },
    watch:{
      value: function value(val) {
        this.stateValue = val?val.split(","):[];;
      },
      url(v){
        this.initDictData();
      }
    }
  }
</script>

<style scoped>
</style>
